<template>
  <div class="musicbox" v-if="songdetail" @click="setid"> 
    <div class="musicleft">
      <img :src="songdetail.al.picUrl" alt="" />
      <div class="musicinfo">
        <div class="musicname">
          <span>{{songdetail.al.name}}</span>
          <div class="wave" v-if="id==songid">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
        <div class="creator">{{songdetail.ar[0].name}}</div>
      </div>
    </div>

    <div class="musicright">
      <span class="iconfont icon-gengduo">

      </span>
    </div>
  </div>
</template>

<script>
import {get}  from '../../http/request'
import {mapState} from 'vuex'
export default {
  props: ["id"],
  data(){
      return{
          songdetail:null,
      }
  }
  ,
  computed:{
    ...mapState(['songid','paused'])
  },
  methods:{

    setid(){
      
      if(this.id!=this.songid){
        this.$store.commit('changesongid',this.id)
        this.$store.commit('changepaused',true)

      }
      else{
        this.$store.commit('changepaused',!this.paused)

      }

      

      
    }
  }
  ,
  mounted() {

    //  this.$store.commit('changesongid',this.id)

    // console.log("music mouted");

    get(`/song/detail?ids=${this.id}`).then(res=>{

        // console.log('歌曲详情',res);

        this.songdetail=res.data.songs[0]

        // console.log(this.songdetail);
    })
  },
};
</script>

<style lang="scss" scoped>
.musicbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 690rem;
  .musicleft {
    display: flex;
    // width: 90%;
    img {
      width: 120rem;
      height: 120rem;
      border-radius: 8rem;
    }
    .musicinfo {
      display: flex;
      // width: 50%;
      flex-direction: column;
      justify-content: center;
      align-items: start;
      margin-left: 30rem;
      .musicname {
        font-size: 22rem;
        color: #fefefe;
        margin-bottom: 25rem;
        font-weight: 600;
        display: flex;
        justify-content: space-between;
        align-items: end;
        // align-items: center;
        span {
          display: block;
          // height: 90%;
          width: 400rem;

          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          text-align: left;
        }
        .wave {
          // width: 20rem;
          height: 10rem;
          // background-color: red;
          width: 100rem;
          //    background-color: red;
          position: relative;
          vertical-align: baseline;
          margin-left: 15rem;
          span {
            position: absolute;
            bottom: 0;

            height: 20rem;
            width: 4rem;
            margin-left: 2rem;
            background-color: #ccc;
            animation: wave 1s infinite;
            &:nth-child(1) {
              animation-delay: 0.3s;
              left: 0rem;
            }
            &:nth-child(2) {
              animation-delay: 0.2s;
              left: 6rem;
            }
            &:nth-child(3) {
              animation-delay: 0.5s;
              left: 12rem;
            }
            &:nth-child(4) {
              left: 18rem;
            }
            &:nth-child(5) {
              animation-delay: 0.5s;
              left: 24rem;
            }
          }
        }
      }
      .creator {
        font-size: 20rem;
        color: #8c8c8c;
        font-weight: 500;
      }
    }
  }
  .musicright {
    width: 30rem;
    height: 30rem;
    flex-grow: 1;
    position: relative;
    // background-color: red;
    span {
      position: absolute;
      right: 0;
      bottom: 13rem;
      font-size: 30rem;
      color: #8f8f8f;
    }
  }
}
@keyframes wave {
  0% {
    height: 10rem;
  }
  50% {
    height: 0rem;
  }
  100% {
    height: 10rem;
  }
}
</style>
